<template>
  <div class="coupon-item" :class="couponStatus.color">
    <div class="shuiying"><icon size="160" name="iconrenminbi" /></div>
    <div class="range">{{ coupon.type ? coupon.shop_name : "全平台" }}</div>
    <div class="xuxian"></div>
    <div class="title" :title="coupon.name">
      <b>{{ coupon.name }}</b>
    </div>
    <div class="info">
      <!-- <span>使用条件：满200 </span> -->
      <span
        >使用期限：{{ dayjs(coupon.start_time).format("YYYY-MM-DD") }} -
        {{ dayjs(coupon.end_time).format("YYYY-MM-DD") }}
      </span>
      <span
        >使用范围：{{
          coupon.type ? "仅限" + coupon.shop_name : "全平台"
        }}</span
      >
    </div>
    <div class="active" @click="couponAction">
      {{ couponStatus.name }}
    </div>
  </div>
</template>

<script>
import api from "@/api";
import dayjs from "dayjs";

export default {
  props: {
    list_status: {
      type: Number,
      default: () => 1,
    },
    coupon: {
      type: Object,
      default: () => {
        return {
          status: 1,
          type: 0,
          shop_name: "利豹旗舰店",
          name: "满减",
          good_type: 0,
          appoint_id: 1,
          start_time: "2020/10/20",
          end_time: "2020/10/30",
        };
      },
    },
  },
  name: "CouponItem1",
  data() {
    return {
      dayjs,
    };
  },
  computed: {
    couponStatus() {
      let color = "red";
      if (this.coupon.coupon_type == 0) color = "golden";
      else if (this.coupon.coupon_type == 1) color = "blue";
      // let
      if (this.list_status === 0) {
        if (this.coupon.status === 0) return { name: "已领取", color };
      } else if (this.list_status === 1) {
        if (this.coupon.status === 0) return { name: "未使用", color };
        else if (this.coupon.status === 1)
          return { name: "已使用", color: "gray" };
        else if (this.coupon.status === 2)
          return { name: "已过期", color: "gray" };
      } else if (this.list_status === 2) {
        if (this.coupon.status === 0) return { name: "未使用", color };
        else if (this.coupon.status === 1)
          return { name: "已使用", color: "gray" };
        else if (this.coupon.status === 2)
          return { name: "已过期", color: "gray" };
      } else if (this.list_status === 3) {
        if (this.coupon.status === 0) return { name: "未领取", color };
        else if (this.coupon.status === 1) return { name: "已领取", color };
      }
      return "";
    },
  },
  methods: {
    async couponAction() {
      let status = this.couponStatus;
      if (status.name === "未领取") {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.3)",
        });
        api
          .COUPON_RECEIVE(this.coupon.coupon_id)
          .then(() => {
            this.$message.success("领取成功");
            this.$emit("change");
            loading.close();
          })
          .catch(() => {
            this.$emit("change");
            loading.close();
          });
      } else {
        const loading = this.$loading({
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.3)",
        });
        this.$emit("change");
        loading.close();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.coupon-item {
  width: 300px;
  // height: 244px;
  background: linear-gradient(90deg, #e14232 0%, #fd6660 100%);
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-size: 0;
  margin-bottom: 20px;
  margin-left: 30px;
  padding-bottom: 5px;
  .shuiying {
    position: absolute;
    color: rgba(255, 255, 255, 0.1);
    top: 0;
    left: -30px;
  }
  .range {
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .xuxian {
    width: 260px;
    height: 1px;
    margin: 0 auto;
    border-bottom: 1px dashed #ffffff;
    &::before {
      content: "";
      display: block;
      width: 24px;
      height: 24px;
      background: #fff;
      border-radius: 50%;
      position: absolute;
      top: 40px;
      left: -12px;
    }
    &::after {
      content: "";
      display: block;
      width: 24px;
      height: 24px;
      background: #fff;
      border-radius: 50%;
      position: absolute;
      top: 40px;
      right: -12px;
    }
  }
  .title {
    font-size: 44px;
    text-align: center;
    color: #ffffff;
    line-height: 62px;
    margin: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    b {
      font-weight: 500;
    }
  }
  .info {
    margin: 0 26px;
    display: flex;
    font-size: 12px;
    color: #fce4e2;
    line-height: 17px;
    flex-direction: column;
  }
  .active {
    margin: 10px auto;
    width: 260px;
    height: 28px;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(255, 0, 0, 0.5);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #dd2e1d;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    cursor: pointer;
    &:active {
      box-shadow: 0px 0px 0px 0px rgba(255, 0, 0, 0.5);
      opacity: 0.8;
    }
  }
  &.blue {
    background: linear-gradient(90deg, #543eed 0%, #4687ef 100%);
    .active {
      box-shadow: 0px 2px 4px 0px rgba(0, 195, 255, 0.5);
      color: #543fed;
    }
  }
  &.golden {
    background: linear-gradient(90deg, #ff8a00 0%, #ffb918 100%);
    .active {
      box-shadow: 0px 2px 4px 0px rgba(255, 204, 0, 0.5);
      color: #ff8b00;
    }
  }
  &.gray {
    background: linear-gradient(90deg, #5c5c5c 0%, #707070 100%);
    .active {
      box-shadow: none;
      color: #999999;
    }
  }
}
</style>
